<!DOCTYPE html> 
<html>
  <meta name="viewport">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,  user-scalable=no">
  <meta charset="utf-8"> 
  <script>
  </script>
  <head>
    <title>test</title>
    <style>
      body{
        margin: 0;
      }
      #wrap{
        position: absolute;
        top: 0;
        height: 32vh;
        left: 0;
        width: 100%;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <div id="wrap"></div>
  </body>
  <script src="http://lib.baomitu.com/babel-polyfill/7.0.0-beta.44/polyfill.js"></script>
  <script src="https://s5.ssl.qhres.com/static/588b46b97caa0749.js"></script>  
  <script src="../node_modules/chimee/lib/index.browser.js"></script>
  <script src="../../chimee-plugin-mobile-controlbar/lib/index.browser.js"></script>
  <script src="../lib/index.browser.js"></script>
  <script>
    var vConsole = new VConsole();
    Chimee.install(chimeePluginMobileControlbar);
    Chimee.install(chimeePluginMobileState);
    var player = new Chimee({
      wrapper: '#wrap',
      src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/18_72_20161228192050dbd3f91c-312f-48c5-aeeb-867b44fb4580.m3u8',
      plugin: [chimeePluginMobileControlbar.name,
      
        {
          name: chimeePluginMobileState.name,
          errorTips: '错误提示',
          // icon: {
          //   loading: '<div>loading</div>',
          //   play: '<div>play</div>' 
          // }
        }
      ],
      controls: true,
      // autoplay: true,
      playsInline: true,
      preload: 'auto',
      poster: 'https://p0.ssl.qhimgs4.com/t01ffdbaa9e95bf5eb2.jpg',
      box: 'native',
    });
    player.on('state-change', function () {
      // console.log(111)
    })
    player.on('state-tap', function () {
      // console.log(222)
    })
    player.on('loadstart', function () {
      console.log(222)
    })
  </script>
</html>